<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Los maravillosos 80</title>
<link rel="stylesheet" type="text/css" href="Public/styles/login.css" />
<!-- copia de styles.css para acomodar solo el login -->
</head>
<body>

	<div id="contentInicio">
		<!-- bloque para contenidos -->  
		<form id="formInicio" onsubmit="return validateLogin();"
			name="formInicio" action="Services/UserService.php"
			enctype="application/x-www-form-urlencoded" method="post">
			<input type="hidden" id="op" name="op" value="login" />
<!--		<input type="hidden" id="op_useralta" name="op" value="alta" />  -->
			<div class="whitediv">
				<!-- bloque blanquecino para jugar con opacity en css -->
				<h3>Identificate</h3>
				<div style="display: inline;">
					<!-- tratamos de ajustar a la misma linea -->
					<span>Alias :</span> <input type="text" maxlength="8" id="userName"
						name="userName" />
				</div>
				<div style="display: inline;">
					<span>Contrase&ntilde;a :</span> <input type="password"
						id="password" name="password" />
				</div>
				<div class="botoneraDerecha">
					<!-- bloque de los botones de registro e inicio sesion -->
					<input type="button" value="Registrate"
						onclick="showRegisterWindow()" class="redButton" />
					<!-- por si necesito mas botones rojos -->
					<input type="submit" value="Iniciar sesion" />
					<!-- boton de inicio sesion -->
				</div>

				<?php
					if(isset($_GET['message']))
				{
				?>
					<div id="errorLoginMessage" class="error">
					<?php 
						echo $_GET['message'];  
					?>
					</div>
					<!-- mensajes de error, de primeras ocultos -->
				<?php
				} 
				else 
				{
				?>
					<div id="errorLoginMessage" class="hidden"></div>
					<!-- mensajes de error, de primeras ocultos -->
					<?php
				} 
				?>
			</div>
		</form>
	</div>


	<!-- puedo necesitar una capa que ocupe todo intermedia para no cruzar funcionalidades -->
	<div id="blockLayer" class="hidden"></div>
	<!-- si doy a registrar, quito el hidden al div register, pero me deja tocar botones que no debo, asi que capa de 100x100 -->

	<div id="register" class="hidden">
		<!-- bloque para contenidos, oculto de primeras-->
		<!-- alta de usuario -->
		<form id="userRegister" onsubmit="return validateRegister();"
			name="userRegistration" action="Services/UserService.php" enctype="application/x-www-form-urlencoded"
			method="post">
			<fieldset>
				<legend>Datos personales:</legend>
				<div style="display: block;">
					<span>Nombre :</span> 
					<input type="text" id="nombre"
						name="nombre" style="float: right;" />
					<div id="nameError"
						class="hidden"></div>
				</div>
				<div style="display: block;">
					<span>Apellidos :</span> <input type="text" id="userLastName"
						name="userLastName" style="float: right;" />
				</div>
			</fieldset>
			<fieldset>
				<legend>Redes sociales:</legend>
				<div style="display: block;">
					<span>Correo elect&oacute;nico :</span> <input type="text"
						id="correo" name="correo" style="float: right;" />
				</div>
				<div style="display: block;">
					<span>Twitter :</span> <input type="text" id="twitter"
						name="twitter" style="float: right;" />
				</div>
			</fieldset>
			<fieldset>
				<legend>Datos de acceso:</legend>
				<div style="display: block;">
					<span>Alias :</span> <input type="text" id="alias"
						name="alias" style="float: right;" />
						<div id="aliasError"
						class="hidden"></div>
				</div>
				<div style="display: block;">
					<span>Contrase&ntilde;a :</span> <input type="password"
						id="userLastName" name="userLastName" style="float: right;" />
				</div>
				<div style="display: block;">
					<span>Repita contrase&ntilde;a :</span> <input type="password"
						id="userLastName" name="userLastName" style="float: right;" />
				</div>
			</fieldset>
			<div class="botoneraDerecha">
				<input type="button" value="Cancelar" onclick="hideRegisterWindow()"
					class="redButton" /> <input type="reset" value="Limpiar"
					class="redButton" />
				<!-- boton de limpia de form -->
				<input type="submit" value="Date de alta!" />
				<!-- boton de alta -->
			</div>
		</form>
	</div>
</body>

<script type="text/javascript" src="Public/scripts/validation.js"></script>
</html>